<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="shortcut icon" href="img/favicon_1.ico">

        <title>Velonic - Responsive Admin Dashboard Template</title>

        <!-- Google-Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:100,300,400,600,700,900,400italic' rel='stylesheet'>


        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-reset.css" rel="stylesheet">

        <!--Animation css-->
        <link href="css/animate.css" rel="stylesheet">

        <!--Icon-fonts css-->
        <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
        <link href="assets/ionicon/css/ionicons.min.css" rel="stylesheet" />


        <!-- Custom styles for this template -->
        <link href="css/style.css" rel="stylesheet">
        <link href="css/helper.css" rel="stylesheet">
        <link href="css/style-responsive.css" rel="stylesheet" />

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->

    </head>


    <body>

        <!-- Aside Start-->
        <aside class="left-panel">

            <!-- brand -->
            <div class="logo">
                <a href="index.html" class="logo-expanded">
                    <img src="img/single-logo.png" alt="logo">
                    <span class="nav-label">Velonic</span>
                </a>
            </div>
            <!-- / brand -->
        
            <!-- Navbar Start -->
            <nav class="navigation">
                <ul class="list-unstyled">
                    <li class="has-submenu"><a href="#"><i class="ion-home"></i> <span class="nav-label">Dashboard</span></a>
                        <ul class="list-unstyled">
                            <li><a href="index.html">Dashboard v1</a></li>
                            <li><a href="dashboard2.html">Dashboard v2</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu active"><a href="#"><i class="ion-flask"></i> <span class="nav-label">UI Elements</span></a>
                        <ul class="list-unstyled">
                            <li><a href="typography.html">Typography</a></li>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="icons.html">Icons</a></li>
                            <li><a href="panels.html">Panels</a></li>
                            <li><a href="tabs-accordions.html">Tabs &amp; Accordions</a></li>
                            <li><a href="modals.html">Modals</a></li>
                            <li class="active"><a href="bootstrap-ui.html">BS Elements</a></li>
                            <li><a href="progressbars.html">Progress Bars</a></li>
                            <li><a href="notification.html">Notification</a></li>
                            <li><a href="sweet-alert.html">Sweet-Alert</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-settings"></i> <span class="nav-label">Components</span></a>
                        <ul class="list-unstyled">
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="portlets.html">Portlets</a></li>
                            <li><a href="widgets.html">Widgets</a></li>
                            <li><a href="nestable-list.html">Nesteble</a></li>
                            <li><a href="calendar.html">Calendar</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-compose"></i> <span class="nav-label">Forms</span></a>
                        <ul class="list-unstyled">
                            <li><a href="form-elements.html">General Elements</a></li>
                            <li><a href="form-validation.html">Form Validation</a></li>
                            <li><a href="form-advanced.html">Advanced Form</a></li>
                            <li><a href="form-wizard.html">Form Wizard</a></li>
                            <li><a href="form-editor.html">WYSIWYG Editor</a></li>
                            <li><a href="code-editor.html">Code Editors</a></li>
                            <li><a href="form-uploads.html">Multiple File Upload</a></li>
                            <li><a href="image-crop.html">Image Crop</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-grid"></i> <span class="nav-label">Data Tables</span></a>
                        <ul class="list-unstyled">
                            <li><a href="tables.html">Basic Tables</a></li>
                            <li><a href="table-datatable.html">Data Table</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-stats-bars"></i> <span class="nav-label">Charts</span></a>
                        <ul class="list-unstyled">
                            <li><a href="morris-chart.html">Morris Chart</a></li>
                            <li><a href="chartjs.html">Chartjs</a></li>
                            <li><a href="flot-chart.html">Flot Chart</a></li>
                            <li><a href="rickshaw-chart.html">Rickshaw Chart</a></li>
                            <li><a href="c3-chart.html">C3 Chart</a></li>
                            <li><a href="other-chart.html">Other Chart</a></li>
                        </ul>
                    </li>

                    <li class="has-submenu"><a href="#"><i class="ion-email"></i> <span class="nav-label">Mail</span></a>
                        <ul class="list-unstyled">
                            <li><a href="inbox.html">Inbox</a></li>
                            <li><a href="email-compose.html">Compose Mail</a></li>
                            <li><a href="email-read.html">View Mail</a></li>
                        </ul>
                    </li>

                    <li class="has-submenu"><a href="#"><i class="ion-location"></i> <span class="nav-label">Maps</span></a>
                        <ul class="list-unstyled">
                            <li><a href="gmap.html"> Google Map</a></li>
                            <li><a href="vector-map.html"> Vector Map</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-document"></i> <span class="nav-label">Pages</span></a>
                        <ul class="list-unstyled">
                            <li><a href="profile.html">Profile</a></li>
                            <li><a href="timeline.html">Timeline</a></li>
                            <li><a href="invoice.html">Invoice</a></li>
                            <li><a href="contact.html">Contact-list</a></li>
                            <li><a href="login.html">Login</a></li>
                            <li><a href="register.html">Register</a></li>
                            <li><a href="recoverpw.html">Recover Password</a></li>
                            <li><a href="lock-screen.html">Lock Screen</a></li>
                            <li><a href="blank.html">Blank Page</a></li>
                            <li><a href="404.html">404 Error</a></li>
                            <li><a href="404_alt.html">404 alt</a></li>
                            <li><a href="500.html">500 Error</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
                
        </aside>
        <!-- Aside Ends-->

        <!--Main Content Start -->
        <section class="content">
            
            <!-- Header -->
            <header class="top-head container-fluid">
                <button type="button" class="navbar-toggle pull-left">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <!-- Search -->
                <form role="search" class="navbar-left app-search pull-left hidden-xs">
                  <input type="text" placeholder="Search..." class="form-control">
                </form>
                
                <!-- Left navbar -->
                <nav class=" navbar-default hidden-xs" role="navigation">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                          <a data-toggle="dropdown" class="dropdown-toggle" href="#">English <span class="caret"></span></a>
                            <ul role="menu" class="dropdown-menu">
                                <li><a href="#">German</a></li>
                                <li><a href="#">French</a></li>
                                <li><a href="#">Italian</a></li>
                                <li><a href="#">Spanish</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Files</a></li>
                        <li><a href="../frontend/" target="_blank">Frontend</a></li>
                    </ul>
                </nav>
                
                <!-- Right navbar -->
                <ul class="list-inline navbar-right top-menu top-right-menu">  
                    <!-- mesages -->  
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="fa fa-envelope-o "></i>
                            <span class="badge badge-sm up bg-purple count">4</span>
                        </a>
                        <ul class="dropdown-menu extended fadeInUp animated nicescroll" tabindex="5001">
                            <li>
                                <p>Messages</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><img src="img/avatar-2.jpg" class="img-circle thumb-sm m-r-15" alt="img"></span>
                                    <span class="block"><strong>John smith</strong></span>
                                    <span class="media-body block">New tasks needs to be done<br><small class="text-muted">10 seconds ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><img src="img/avatar-3.jpg" class="img-circle thumb-sm m-r-15" alt="img"></span>
                                    <span class="block"><strong>John smith</strong></span>
                                    <span class="media-body block">New tasks needs to be done<br><small class="text-muted">3 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><img src="img/avatar-4.jpg" class="img-circle thumb-sm m-r-15" alt="img"></span>
                                    <span class="block"><strong>John smith</strong></span>
                                    <span class="media-body block">New tasks needs to be done<br><small class="text-muted">10 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <p><a href="inbox.html" class="text-right">See all Messages</a></p>
                            </li>
                        </ul>
                    </li>
                    <!-- /messages -->
                    <!-- Notification -->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="fa fa-bell-o"></i>
                            <span class="badge badge-sm up bg-pink count">3</span>
                        </a>
                        <ul class="dropdown-menu extended fadeInUp animated nicescroll" tabindex="5002">
                            <li class="noti-header">
                                <p>Notifications</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><i class="fa fa-user-plus fa-2x text-info"></i></span>
                                    <span>New user registered<br><small class="text-muted">5 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><i class="fa fa-diamond fa-2x text-primary"></i></span>
                                    <span>Use animate.css<br><small class="text-muted">5 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><i class="fa fa-bell-o fa-2x text-danger"></i></span>
                                    <span>Send project demo files to client<br><small class="text-muted">1 hour ago</small></span>
                                </a>
                            </li>
                            
                            <li>
                                <p><a href="#" class="text-right">See all notifications</a></p>
                            </li>
                        </ul>
                    </li>
                    <!-- /Notification -->

                    <!-- user login dropdown start-->
                    <li class="dropdown text-center">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" src="img/avatar-2.jpg" class="img-circle profile-img thumb-sm">
                            <span class="username">John Deo </span> <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu extended pro-menu fadeInUp animated" tabindex="5003" style="overflow: hidden; outline: none;">
                            <li><a href="profile.html"><i class="fa fa-briefcase"></i>Profile</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
                            <li><a href="#"><i class="fa fa-bell"></i> Friends <span class="label label-info pull-right mail-info">5</span></a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> Log Out</a></li>
                        </ul>
                    </li>
                    <!-- user login dropdown end -->       
                </ul>
                <!-- End right navbar -->

            </header>
            <!-- Header Ends -->


            <!-- Page Content Start -->
            <!-- ================== -->

            <div class="wraper container-fluid">
                <div class="page-title"> 
                    <h3 class="title">Bootstrap-Elements</h3> 
                </div>

                <div class="row">

                    <!-- Popovers -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"> 
                                <h3 class="panel-title">Popovers</h3> 
                            </div> 
                            <div class="panel-body"> 
                                <ul class="list-inline m-b-10">
                                
                                    <li>
                                        <button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                        Popover on top
                                        </button>
                                    </li>
                                    
                                    <li>
                                        <button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="bottom" data-content="Vivamus
                                        sagittis lacus vel augue laoreet rutrum faucibus.">
                                        Popover on bottom
                                        </button>
                                    </li>
                                    
                                    <li>
                                        <button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                        Popover on right
                                        </button>
                                    </li>
                                    
                                    <li>
                                        <button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover title">
                                        Popover on left
                                        </button>
                                    </li>

                                </ul>
                                <button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">Dismissible popover
                                </button>
                            </div>  <!-- end panel-body -->
                        </div> <!-- panel -->
                    </div>

                    <!-- Tooltips -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"> 
                                <h3 class="panel-title">Tooltips</h3> 
                            </div> 
                            <div class="panel-body"> 
                                <ul class="list-inline">
                                    <li><button type="button" class="btn btn-default tooltip-btn" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button></li>

                                    <li><button type="button" class="btn btn-default tooltip-btn" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button></li>
                                    
                                    <li><button type="button" class="btn btn-default tooltip-btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button></li>
                                    
                                    <li><button type="button" class="btn btn-default tooltip-btn" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button></li>
                                </ul>
                            </div> 
                        </div>
                    </div>
                </div> <!-- End row-->




                <div class="row">
                    <!-- Labels -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"> 
                                <h3 class="panel-title">Labels</h3> 
                            </div> 
                            <div class="panel-body">
                                <p>
                                    <span class="label label-default">Default</span>
                                    <span class="label label-primary">Primary</span>
                                    <span class="label label-success">Success</span>
                                    <span class="label label-info">Info</span>
                                    <span class="label label-warning">Warning</span>
                                    <span class="label label-danger">Danger</span>
                                    <span class="label label-purple">Purple</span>
                                    <span class="label label-inverse">Inverse</span>
                                    <span class="label label-pink">Pink</span>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Badge -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"> 
                                <h3 class="panel-title">Badge</h3> 
                            </div> 
                            <div class="panel-body">
                                <p>          
                                  <span class="badge bg-primary">15</span>
                                  <span class="badge bg-success">0</span>
                                  <span class="badge bg-info">21</span>
                                  <span class="badge bg-inverse">3</span>
                                  <span class="badge bg-warning">35</span>
                                  <span class="badge bg-danger">32</span>
                                  <span class="badge bg-purple">51</span>
                                  <span class="badge bg-pink">77</span>
                                  <span class="badge">9</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div> <!-- End row -->



                <div class="row">

                    <!-- Standard Alert -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"> 
                                <h3 class="panel-title">Standard Alert</h3> 
                            </div> 
                            <div class="panel-body"> 
                            
                                <div class="alert alert-success">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
                                </div>
                                <div class="alert alert-info">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
                                </div>
                                <div class="alert alert-warning">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
                                </div>
                                <div class="alert alert-danger">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
                                </div>

                                <div class="alert alert-success fade in">
                                    <h4>Big one!</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                                    <p>
                                      <button type="button" class="btn btn-success">Wanna do this</button>
                                      <button type="button" class="btn btn-default">Or do this</button>
                                    </p>
                                </div>
                            </div>  <!-- Panel-body -->
                        </div> <!-- Panel-->
                    </div>

                    <div class="col-md-6">

                        <!-- Dismissable Alert -->
                        <div class="panel panel-default">
                            <div class="panel-heading"> 
                                <h3 class="panel-title">Dismissable Alert</h3> 
                            </div> 
                            <div class="panel-body"> 
                                <div class="alert alert-success alert-dismissable">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
                                </div>
                                <div class="alert alert-info alert-dismissable">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
                                </div>
                                <div class="alert alert-warning alert-dismissable">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
                                </div>
                                <div class="alert alert-danger alert-dismissable">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
                                </div>

                                <div class="alert alert-info fade in">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <h4>Big one!</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                                    <p>
                                      <button type="button" class="btn btn-info">Wanna do this</button>
                                      <button type="button" class="btn btn-default">Or do this</button>
                                    </p>
                                </div>
                            </div> <!-- Panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->
                </div> <!-- End row -->



                <div class="row">

                    <!-- Pagination -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"> 
                                <h3 class="panel-title">Pagination</h3> 
                            </div> 
                            <div class="panel-body"> 
                                <ul class="pagination m-b-5">
                                    <li>
                                      <a href="#" aria-label="Previous">
                                        <i class="fa fa-angle-left"></i>
                                      </a>
                                    </li>
                                    <li><a href="#">1</a></li>
                                    <li class="active"><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li class="disabled"><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li>
                                      <a href="#" aria-label="Next">
                                        <i class="fa fa-angle-right"></i>
                                      </a>
                                    </li>
                                </ul>


                                <div class="clear"></div>

                                <ul class="pagination pagination-sm"> 
                                    <li> <a href="#"> <i class="fa fa-angle-left"></i> </a> </li> 
                                    <li> <a href="#">1</a> </li> 
                                    <li class="active"> <a href="#">2</a> </li> 
                                    <li> <a href="#">3</a> </li> 
                                    <li class="disabled"> <a href="#">4</a> </li> 
                                    <li> <a href="#">5</a> </li> 
                                    <li> <a href="#">6</a> </li> 
                                    <li> <a href="#"> <i class="fa fa-angle-right"></i> </a> </li> 
                                </ul>

                                <div class="clear"></div>
                                
                                <ul class="pagination pagination-lg m-0"> 
                                    <li> <a href="#"> <i class="fa fa-angle-left"></i> </a> </li> 
                                    <li> <a href="#">1</a> </li> 
                                    <li class="active"> <a href="#">2</a> </li> 
                                    <li> <a href="#">3</a> </li> 
                                    <li> <a href="#">4</a> </li> 
                                    <li> <a href="#"> <i class="fa fa-angle-right"></i> </a> </li> 
                                </ul>

                            </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div>


                    <!-- Pagers -->
                    <div class="col-sm-6"> 
                        <div class="panel panel-default"> 
                            <div class="panel-heading"> 
                                <div class="panel-title">Pagers</div> 
                            </div> 
                            <div class="panel-body"> 
                                <ul class="pager"> 
                                    <li> 
                                        <a href="#"> <i class="fa fa-angle-double-left"></i> Previous</a> 
                                    </li> 
                                    <li> 
                                        <a href="#">Next <i class="fa fa-angle-double-right"></i> </a> 
                                    </li> 
                                </ul> 
                                <ul class="pager"> 
                                    <li class="previous"> 
                                        <a href="#"> <i class="fa fa-long-arrow-left"></i> </a> 
                                    </li> 
                                    <li class="next"> 
                                        <a href="#"> <i class="fa fa-long-arrow-right"></i> </a> 
                                    </li> 
                                </ul> 
                                <ul class="pager"> 
                                    <li class="previous disabled">
                                        <a href="#"><i class="fa fa-long-arrow-left"></i> Previous</a>
                                    </li> 
                                    <li class="next">
                                        <a href="#">Next <i class="fa fa-long-arrow-right"></i></a>
                                    </li> 
                                </ul> 
                            </div> 
                        </div> 
                    </div>

                </div> <!-- End row -->


                <!-- List Groups -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading"> 
                                <h3 class="panel-title">List Groups</h3> 
                            </div> 
                            <div class="panel-body"> 
                                <div class="row">
                                    <div class="col-md-6">
                                        <h5>Simple List Group</h5>
                                        <ul class="list-group">
                                            <li class="list-group-item">
                                                <span class="badge bg-primary">14</span>
                                                Cras justo odio
                                            </li>
                                            <li class="list-group-item">
                                                <span class="badge bg-purple">2</span>
                                                Dapibus ac facilisis in
                                            </li>
                                            <li class="list-group-item">
                                                <span class="badge bg-pink">1</span>
                                                Morbi leo risus
                                            </li>
                                            <li class="list-group-item">
                                                <span class="badge bg-inverse">1</span>
                                                Morbi leo risus
                                            </li>
                                            <li class="list-group-item">
                                                <span class="badge bg-success">1</span>
                                                Morbi leo risus
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="col-md-6">
                                        <h5>List Group with Links</h5>
                                        <div class="list-group">
                                            <a href="#" class="list-group-item active">
                                                Cras justo odio
                                            </a>
                                            <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                                            <a href="#" class="list-group-item">Morbi leo risus</a>
                                            <a href="#" class="list-group-item disabled">Porta ac consectetur ac</a>
                                            <a href="#" class="list-group-item">Vestibulum at eros</a>
                                        </div> <!-- list-group -->
                                    </div> <!-- col -->
                                </div> <!-- end row -->
                            </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->
                </div> <!-- End row -->



                <!-- List Group with Description -->
                <div class="row">
                    <div class="col-sm-12"> 
                        <div class="panel panel-default">
                            <div class="panel-heading"> 
                                <h3 class="panel-title">List Group with Description</h3> 
                            </div> 
                            <div class="panel-body"> 
                                <div class="list-group"> 
                                    <a href="#" class="list-group-item active"> 
                                        <h4 class="list-group-item-heading">Domestic confined any but son</h4> 
                                        <p class="list-group-item-text">Consider speaking me prospect whatever if. Ten nearer rather hunted six parish indeed number. Allowance repulsive sex may contained can set suspected abilities cordially. Do part am he high rest that. So fruit to ready it being views match. </p> 
                                    </a> 
                                    <a href="#" class="list-group-item disabled"> 
                                        <h4 class="list-group-item-heading">Why painful the sixteen how minuter</h4> 
                                        <p class="list-group-item-text">Started his hearted any civilly. So me by marianne admitted speaking. Men bred fine call ask. Cease one miles truth day above seven. Suspicion sportsmen provision suffering mrs saw engrossed something. Snug soon he on plan in be dine some. </p> 
                                    </a> 
                                    <a href="#" class="list-group-item"> 
                                        <h4 class="list-group-item-heading">Barton waited twenty always repair</h4> 
                                        <p class="list-group-item-text">Talking chamber as shewing an it minutes. Trees fully of blind do. Exquisite favourite at do extensive listening. Improve up musical welcome he. Gay attended vicinity prepared now diverted. Esteems it ye sending reached as. Longer lively her design settle tastes advice mrs off who. </p> 
                                    </a> 
                                </div> <!-- list-group -->
                            </div> <!-- Panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->
                </div> <!-- End row -->


            </div>
            <!-- Page Content Ends -->
            <!-- ================== -->

            <!-- Footer Start -->
            <footer class="footer">
                2015 © Velonic.
            </footer>
            <!-- Footer Ends -->


        </section>
        <!-- Main Content Ends -->
        



        <!-- js placed at the end of the document so the pages load faster -->
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/pace.min.js"></script>
        <script src="js/wow.min.js"></script>
        <script src="js/jquery.nicescroll.js" type="text/javascript"></script>

        <script src="js/jquery.app.js"></script>
    

    </body>
</html>
